<html>
<head>
<script language="JavaScript">
	setTimeout(function() {
		location.reload()
	}, 30000);
</script>
<script>
	function enableMonitor(me, guid, enabled) {
		var iLabel = "";
		var title = "";
		if (enabled) {
			iLabel += '<i class="fa fa-play"></i>';
			title = "启动";
		} else {
			iLabel += '<i class="fa fa-pause"></i>';
			title = "暂停";
		}

		$.ajax({
			url : "/enableMonitor",
			type : 'GET',
			data : {
				"guid" : guid,
				"enabled" : enabled
			},
			success : function(data) {
				if (data) {
					alert("执行成功！");
					$(me).empty();
					$(me).append(iLabel);
					$(me).attr(
							"onclick",
							"enableMonitor(this,'" + guid + "'," + (!enabled)
									+ ")");
					$(me).attr("title", title);
				} else {
					alert("执行失败！");
				}
			}
		});
	}

	function deleteMonitor(me, guid) {
		$.ajax({
			url : "/deleteMonitor",
			type : 'GET',
			data : {
				"guid" : guid
			},
			success : function(data) {
				if (data) {
					alert("删除成功！");
					$(me).parent().parent().remove();
				} else {
					alert("删除失败！");
				}
			}
		});
	}
	$(function() {
		$('#example1').DataTable({
			'paging' : false,
			'lengthChange' : false,
			'searching' : false,
			'ordering' : false,
			'info' : false,
			'autoWidth' : true
		})
	})
</script>
</head>
<body>

	<div class="content-wrapper">
		<section class="content-header">
			<h1>
				<ol class="breadcrumb">
					<li><i class="fa fa-dashboard"></i> 主页</li>
					<li>API(24H)监控</li>
					<li class="active">监控列表</li>
				</ol>
			</h1>
			<ol class="breadcrumb">
				<li>
					<div class="btn-group" style="margin-bottom: 10px;">
						<a href="/addSingleMonitor" class="btn btn-default">添加API监控</a>
					</div>
				</li>
			</ol>

		</section>

		<section class="content">
			<div class="row">
				<div class="col-xs-12">
					<div class="box box-primary">
						<div class="box-body table-responsive">

							<table id="example1" class="table table-bordered table-striped">
								<thead>
									<tr>
										<th>所属系统</th>
										<th>接口名称</th>
										<th>接口地址</th>
										<th>监控频率</th>
										<th>监控次数</th>
										<th>异常</th>
										<th>可用率</th>
										<th>平均响应</th>
										<th>最新状态</th>
										<th>响应(最短|最长)</th>
										<th>未监控时长</th>
										<th>常用操作</th>
									</tr>
								</thead>
								<tbody>
									<tr th:each="item:${monitorList}">
										<td th:text="${item.group}"></td>
										<td><a
											th:href="'/monitorLogEcharts?guid='+${item.guid}+'&amp;name='+${item.name}+'&amp;url='+${item.urlStr}"
											th:text="${item.name}"></a></td>
										<td th:text="${item.urlStr}"></td>
										<td th:text="${item.frequency}"></td>
										<td th:text="${item.moniCount}+'次  '"></td>
										<td th:text="${item.fCount}+'次  '"></td>
										<td th:text="${item.usability}"></td>
										<td th:text="${item.avgCostTime}+'ms'"></td>
										<td><i th:class="'fa fa-circle '+${item.textColor}"
											th:text="${item.status}+'('+${item.lastCost}+'ms)'"></i></td>
										<td th:text="${item.minCost}+'ms | '+${item.maxCost}+'ms'"></td>
										<td th:text="${item.createTime}"></td>
										<td><a
											th:href="'/monitorLog?guid='+${item.guid}+'&amp;name='+${item.name}+'&amp;url='+${item.urlStr}"
											style="padding: 0px 6px;" data-toggle="tooltip" title="日志"><i
												class="fa fa-file"></i></a> <a href="javascript:void(0)"
											th:onclick="'enableMonitor(this,\''+${item.guid}+'\','+${item.enabled}+')'"
											style="padding: 0px 6px;" data-toggle="tooltip"
											th:title="${item.enabled==true}? '暂停' : '启动'"> <i
												th:class="${item.enabled==true}? 'fa fa-pause' : 'fa fa-play'"></i>
										</a> <a th:if="${item.type} eq '单API'"
											th:href="'/editSingleMonitor?guid='+${item.guid}"
											style="padding: 0px 6px;" data-toggle="tooltip" title="配置"><i
												class="fa fa-gear"></i></a> <a th:if="${item.type} eq '多API'"
											th:href="'/editSequenceMonitor?guid='+${item.guid}"
											style="padding: 0px 6px;" data-toggle="tooltip" title="配置"><i
												class="fa fa-gear"></i></a> <a href="javascript:void(0)"
											th:onclick="'deleteMonitor(this,\''+${item.guid}+'\')'"
											style="padding: 0px 6px;" data-toggle="tooltip" title="删除"><i
												class="fa fa-trash"></i></a></td>
									</tr>
								</tbody>
								<tfoot>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</body>
</html>